<template>
	<!-- 我的 -> 最近阅读组件 -->
	<view class="s-card">
		<view class="kaland" @click="toXiangqing" v-for="(item,index) in shuList" :key="index">
			<view class="active">
				<view class="ka-left">
					<image :src="item.imgSrc" mode=""></image>
				</view>
				<view class="ka-right">
					<view class="right-head">
						{{item.title}}
					</view>
					<view class="right-body">
						<view>{{item.geng}}</view>
						<view>{{item.author}}</view>
					</view>
					<view class="right-end">
						{{item.desc}}
					</view>
				</view>
			</view>
			<!-- 卡片选中时的样式 -->
			<view class="u-active"  v-show="isShow"  @click.stop="actShow(index)">
				<view class="active-img">
					<image src="" mode="" v-show="!item.show"></image>
					<image :src="img" mode="" v-show="item.show"></image>
				</view>
			</view>
		</view>
		<u-divider v-show="dividerShow"  margin-top="36">到底了~</u-divider>
	</view>
</template>

<script>
	export default {
		name:"my-zuijin",
		computed:{
			value:{
				//通过计算属性，监听 value 的变化
				get() { // 显示修改后的数据
				    return this.shuList.every((item)=>item.show)
				},
				// 修改数据  传参  
				set(v) {
				   this.shuList.forEach((item)=>item.show=v)
				},
			}
		},
		props:{
			shulist:{
				type:Array,
				default(){
					return [{img:' ',title:"更新中..."}]
				}
			},
			isShow:{
				type:Boolean,
				default:false
			},
			dividerShow:{ //是否显示分割线
				type:Boolean,
				default:false
			}
		},
		created(){
			this.shuList = this.shulist;
		},
		data() {
			return {
				img:"/static/index/dui.png",  //卡片选中时候的样式
				imgIndex:false, //控制卡片是否选中
				shuList:[], //将父组件传过来的值赋给本地，方便查改
			};
		},
		methods:{
			toXiangqing(){ //跳转详情页
				//console.log(111)
				uni.navigateTo({
				    url: '/pages/xiangqing/xiangqing'
				});
			},
			actShow(index){ //点击状态切换
				//console.log(show)
				//点击获得索引，然后根据索引增加选中样式
				this.shuList[index].show =! this.shuList[index].show
				//给删除添加样式
				let show = false
				function compare(element,index,array){
					return element.show === true
				}
				show = this.shuList.some(compare);
				//向父组件发送事件然后传值，来管理 全部 复选框的状态
				this.$emit('active',this.value,show)
			},
			quanXuan(){  // 全选状态
				//console.log(1211)
				//遍历数组，然后给每条数组的全选样式改为 true
				this.shuList.forEach((item)=>{
					item.show = true
				})
			},
			unquanXuan(){ //不全选状态
			//遍历数组，然后给每条数组的全选样式改为 false
				this.shuList.forEach((item)=>{
					item.show = false
				})
			},
			del(){ //删除功能
				//以下代码，只会一条一条删除数据，不会一下全部删除
				// for(let i = 0;i<this.shuList.length;i++){
				// 	let obj = this.shuList[i]
				// 	if(obj.show){
				// 		this.shuList.splice(i,1)
				// 	}
				// }
				//以下代码可以一条一条删除数据，也可以全部删除数据
				var newData =[];
				this.shuList.forEach((val,index) => {
					if ( !val.show) {
						newData.push(val)
					}
				})
				this.shuList = newData
				//判断数组的长度，长度为 0 ，则禁用 复选框
				if(this.shuList.length == 0){
					//通过自定义事件，向父组件传方法的时候也传一个值去禁用 复选框
					this.$emit('flagle',true)
				}
			 }
		}
	}
</script>

<style scoped lang="scss">
.s-card{
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	.kaland{
		margin-top: 10rpx;
		// background-color: #4CD964;
		background: #FFFFFF;
		width: 678rpx;
		height: 270rpx;
		box-shadow: 0px 0px 16px 0px #EBEBEB;
		border-radius: 20px;
		margin-top: 20rpx;
		position: relative;
		.active{
			width: 678rpx;
			height: 270rpx;
			display: flex;
			padding: 44rpx 29rpx;
			box-sizing: border-box;
			.ka-left{
				display: flex;
				align-items: center;
				image{
					width: 134rpx;
					height: 180rpx;
					opacity: 0.75;
				}
			}
			.ka-right{
				margin-left: 28rpx;
				font-family: Microsoft YaHei;
				.right-head{
					font-size: 30rpx;
					font-weight: bold;
					color: #000000;
					line-height: 50rpx;
				}
				.right-body{
					display: flex;
					justify-content: space-between;
					font-size: 24rpx;
					font-weight: 400;
					color: #A7A7A7;
					line-height: 50rpx;
				}
				.right-end{
					font-size: 31rpx;
					font-weight: 400;
					color: #939393;
					line-height: 49rpx;
					overflow: hidden;
					word-break: break-all;  /* break-all(允许在单词内换行。) */
					text-overflow: ellipsis;  /* 超出部分省略号 */
					display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/
					-webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
					-webkit-line-clamp: 2; /** 显示的行数 **/
				}
			}
		}
	}
	.u-active{
		width: 678rpx;
		height: 270rpx;
		background: rgba(0, 0, 0, 0.73);
		position: absolute;
		top: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 20px;
		.active-img{
			image{
				width: 54rpx;
				height: 54rpx;
				background: #FFFFFF;
				border: 1rpx solid #FF5352;
				border-radius: 50%;
			}
		}
	}
}
</style>
